import React from 'react';
import DataSwiper from "./DataSwiper";
import {DataSwiperParams, DataSwiperProps} from "./type";
import {Request} from "@/types/utils";
import {useQuery} from "@/hooks";

const DataSwiperRequest = <D, >(props: DataSwiperProps<D> & Request<D, DataSwiperParams> ) => {

    const {
        api,
        params,
        ...attrs
    } = props;
    // 选中列的value值
    const fields: string[] = props.list.map(item => item[props.valueKey]);


    const {data: res, isLoading, isFetching, isSuccess, Loading} = useQuery(api, {
        ...params!,
        fields
    }, {
        enabled: fields.length > 0,
        retry: false,
    })
    console.log("面板数据", isFetching);
    if (isFetching) return <Loading loading={isFetching}></Loading>
    if (res && isSuccess) return (
        <DataSwiper
            data={res.data}
            {...attrs}
        ></DataSwiper>
    );
};

export default DataSwiperRequest;